<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2025-09-17 09:19:46
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-17 15:17:03
-->
 <!doctype html>
 <html lang="en">
    <head>
        <style>
            * {
               margin: 0;
               padding: 0; 
            }
            .main{
                border: 1px solid red;
                width: 100vw;
                height: 100vh;
            }
            .app{
                display: grid;
                /* grid-template-columns: repeat(auto-fill,100px); */
                /* grid-template-columns: 150px 1fr 2fr; */
                /* grid-template-columns: 1fr 2fr minmax(100px,1fr) 1   ;
                 grid-template-rows: repeat(3,100px);
                */
                grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
                grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4]; 
                /* grid-template-columns: 70% 30%;
                /* grid-template-columns: repeat(12,1fr); */
                /* grid-template-rows: repeat(3,100px);
                grid-template-columns: repeat(3,100px);
                grid-row-gap: 20px;
                grid-column-gap:  20px; */
                /* grid-auto-flow: column; */
                grid-template-areas: 
                                    'a b c'
                                    'd e f'
                                    'g h j';
                /* grid-auto-flow: row dense; */
                grid-auto-flow: column dense;
                 justify-items: start;
                   align-items: start;  
 /*end  center  stretch; */
                 
            }
            .inner{
                width: 100px;    
                height: 100px;
            }
            .inner1{
                background-color: aliceblue;
                width: 200px;
                grid-column-start: c1;
                grid-column-end:c3;
                
            }
            
            .inner2{
                background-color: rgb(33, 127, 210);
                width: 200px;
                grid-column-start: c1;
                grid-column-end:c3;
            }
            
            .inner3{
                background-color: rgb(14, 255, 255);
            }
            
            .inner4{
                background-color: rgb(220, 2, 254);
            }
            
            .inner5{
                background-color: rgb(250, 21, 40);
            }
            
            .inner6{
                background-color: rgb(21, 255, 0);
            }
            
            .inner7{
                background-color: rgb(200, 255, 0);
            }
            .inner8{
                background-color: rgb(11, 70, 196);
            }
            .inner9{
                background-color: rgb(0, 255, 204);
            }
        </style>
    </head>
    <body class="app">
        <div class="inner inner1" >
            1
        </div>
        <div class="inner inner2">
            2
        </div>
        <div class="inner inner3">
            3
        </div>
        <div class="inner inner4">
            4
        </div>
        <div class="inner inner5">
            5
        </div>
        <div class="inner inner6">
            6
        </div>
        <div class="inner inner7">
            7
        </div>
        <div class="inner inner8">
            8
        </div>
             
        <div class="inner inner9">
            9    
        </div>
            
    </body>
 </html>
